<template>
  <el-dialog :title="info.title" :visible.sync="visible" center width="960px" :before-close="handleCancel">
    <div class="">
      <div class="page-filter mb10 fl">
        <el-form ref="filter" :model="filter" label-width="0">
          <el-form-item class="mr10 mb5 fl">
            <el-select v-model="filter.pay_type" clearable placeholder="付款方式" size="small" style="width: 100%">
              <el-option
                v-for="item in paytypes"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="mr10 mb5 fl" style="width: 300px">
            <el-button class="fl" type="primary" size="small" @click="getList">查 询</el-button>
            <el-button v-if="info.type !== 'view'" class="fl" type="primary" size="small" @click="handleAdd">新 增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table ref="multipleTable" class="search-table" :data="list" border fit highlight-current-row style="width: 100%;">
        <el-table-column label="序号" align="center" width="56px">
          <template slot-scope="{$index}">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="回款方式" width="120px" prop="value" />
        <!-- <el-table-column label="回款比例" align="right" width="140px">
          <template slot-scope="{row}">
            {{ app.toFix((row.money/row.lpp_money)*100, 2) + '%' }}
          </template>
        </el-table-column> -->
        <el-table-column label="回款金额" align="right" width="160px">
          <template slot-scope="{row}">
            {{ app.toFix(row.money, 2) }}
          </template>
        </el-table-column>
        <el-table-column label="预计时间" align="center" width="140px" prop="fund_time" />
        <el-table-column label="备注" min-width="260px" prop="remark" />
        <el-table-column v-if="info.type !== 'view'" label="操作" align="center" width="110px" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown style="height:29px">
              <el-button size="mini" type="primary">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)">编 辑</el-dropdown-item>
                <!-- <el-dropdown-item @click.native="archives(row, '0')">发 票</el-dropdown-item> -->
                <!-- <el-dropdown-item @click.native="archives(row, '1')">资 料</el-dropdown-item> -->
                <el-dropdown-item @click.native="handleDelete(row)">删 除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="filter.pageAll>0" :total="filter.pageAll" :page.sync="filter.pageCurrent" :limit.sync="filter.pageNumber" @pagination="getList" />
      <Dialog ref="dialog" :get-data="getList" :info="dialog" />
      <!-- <Archives ref="archives" :get-data="getList" :info="dialog" /> -->
    </div>
  </el-dialog>
</template>

<script>
import page from '@/utils/page'
import { proFunds, delFunds, payType } from '@/api/project'
import Pagination from '@/components/Pagination'
import Dialog from './fund-dialog'
// import Archives from './archives-dialog'

export default {
  components: { Pagination, Dialog },
  extends: page,
  inject: ['app'],
  props: {
    info: {
      type: Object,
      default: null
    },
    getData: {
      type: Function,
      default: function() {}
    },
    reqList: {
      default: proFunds,
      type: Function
    }
  },
  data() {
    return {
      paytypes: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'list', [])
        this.$set(this, 'form', this.info.edit)
        this.$set(this.filter, 'pro_id', this.form.pro_id)
        this.$set(this.filter, 'pay_type', '')
        // this.selFundPays()
        this.payType()
        this.getList()
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
        })
      }
    }
  },
  mounted() {
  },
  methods: {
    payType() {
      payType().then(response => {
        this.paytypes = response.info
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // getList(e) {
    //   proFunds({
    //     ...this.filter,
    //     ...e,
    //     ...{ pro_id: this.form.pro_id }
    //   }).then(response => {
    //     this.list = response.list
    //     this.filter = response.filter
    //   }).catch(err => {
    //     this.$message.error(err.msg)
    //   })
    // },
    // archives(e, t) {
    //   let title = '请款发票'
    //   if (t === '1') title = '请款资料'
    //   this.dialog.title = title
    //   this.app.dialogParam(this.dialog.edit, ['lpp_id', 'type'], { 'lpp_id': e.id, 'type': t })
    //   this.$refs['archives'].visible = true
    // },
    // selFundPays() {
    //   selFundPays({
    //     pro_id: this.form.pro_id
    //   }).then(response => {
    //     this.paytypes = response.info
    //   }).catch(err => {
    //     this.$message.error(err.msg)
    //   })
    // },
    handleDelete(e) {
      this.$confirm('此操作将删除数据信息，数据将无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        delFunds({
          ids: e['id']
        }).then(response => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    },
    handleEdit(e) {
      this.dialog.title = '编辑回款计划'
      this.dialog.type = 'edit'
      e.pro_id = this.filter.pro_id
      this.app.dialogParam(this.dialog.edit, ['id', 'pro_id', 'lpp_id', 'money', 'fund_time', 'remark'], e)
      this.$refs['dialog'].visible = true
    },
    handleAdd(e) {
      this.dialog.title = '新增回款计划'
      this.dialog.type = 'add'
      e.pro_id = this.filter.pro_id
      this.app.dialogParam(this.dialog.edit, ['id', 'pro_id', 'lpp_id', 'money', 'fund_time', 'remark'], e)
      this.$refs['dialog'].visible = true
    },
    handleCancel(done) {
      this.getData()
      if (this.$refs['formDate']) this.$refs['formDate'].resetFields()
      if (done && typeof done === Function) {
        done()
      } else {
        this.visible = false
      }
    }
  }
}
</script>

<style scoped>
</style>
